<template>
    <div class="loading-mask">
        <div class="loader" v-if="loadingStyle == 'cool'"></div>
        <div class="spinner" v-if="loadingStyle == 'wave'">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loadingStyle: 'wave',
        }
    },
}
</script>
<style lang="less" scoped>
.spinner {
    position: relative;
    height: 40px;
    top: 50%;
    left: 50%;
    text-align: center;
    font-size: 10px;
    transform: translate3d(-50%, -50%, 0);
}

.spinner > div {
    background-color: var(--default);
    height: 100%;
    margin-right: 6px;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%,
    20% {
        -webkit-transform: scaleY(0.8);
    }
    40%,
    100% {
        -webkit-transform: scaleY(0.6);
    }
}

@keyframes stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}

@colors: rgba(337, 84, 48, 0.75) rgba(160, 50, 48, 0.75) rgba(190, 61, 65, 0.75)
    rgba(41, 82, 52, 0.75);
@size: 2.5em;
@thickness: 0.5em;

// Calculated variables.
@lat: (@size - @thickness) / 2;
@offset: @lat - @thickness;

.loading-mask {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.1);
    .loader {
        position: relative;
        width: @size;
        height: @size;
        transform: rotate(165deg);

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: @thickness;
            height: @thickness;
            border-radius: @thickness / 2;
            transform: translate(-50%, -50%);
            box-shadow: @lat (-@offset) extract(@colors, 1),
                (-@lat) @offset extract(@colors, 3);
        }

        &::before {
            animation: before 2s infinite;
        }

        &::after {
            animation: after 2s infinite;
        }
    }
}

@keyframes before {
    0% {
        width: @thickness;
        box-shadow: @lat (-@offset) extract(@colors, 1),
            (-@lat) @offset extract(@colors, 3);
    }
    35% {
        width: @size;
        box-shadow: 0 (-@offset) extract(@colors, 1),
            0 @offset extract(@colors, 3);
    }
    70% {
        width: @thickness;
        box-shadow: (-@lat) (-@offset) extract(@colors, 1),
            @lat @offset extract(@colors, 3);
    }
    100% {
        box-shadow: @lat (-@offset) extract(@colors, 1),
            (-@lat) @offset extract(@colors, 3);
    }
}

@keyframes after {
    0% {
        height: @thickness;
        box-shadow: @offset @lat extract(@colors, 2),
            (-@offset) (-@lat) extract(@colors, 4);
    }
    35% {
        height: @size;
        box-shadow: @offset 0 extract(@colors, 2),
            (-@offset) 0 extract(@colors, 4);
    }
    70% {
        height: @thickness;
        box-shadow: @offset (-@lat) extract(@colors, 2),
            (-@offset) @lat extract(@colors, 4);
    }
    100% {
        box-shadow: @offset @lat extract(@colors, 2),
            (-@offset) (-@lat) extract(@colors, 4);
    }
}

/**
 * Attempt to center the whole thing!
 */

html,
body {
    height: 100%;
}

.loader {
    position: absolute;
    top: calc(50% - @size / 2);
    left: calc(50% - @size / 2);
}
</style>
